[#ftl]
 
  [@define "agile.chart.Line"  "agile._Component" ]		
	widgetName:"Line"
	[#assign templateString][#compress]  	
 		<div class='agileComponent agileLine' style="width:200px;height:20px;background-color:transparent!important"></div> 		
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,resizeAxis:"x"
	,templateMap:{
		dojo:"<div {id} {html-style} {html-parameters}>{innerWidets}</div>"
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}	
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		length:lang.mixin({},agile.NumberMetadata,{
			onValueChange:function(widget,name,value){				
				widget.metadata("style.width",value);
			}
		})
		,height:lang.mixin({},agile.NumberMetadata,{
			onValueChange:function(widget,name,value){				
				widget.metadata("style.height",value);
			}
		})
	})	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		border:lang.mixin({},agile.MetadataConstraint,{_readOnly:true,_ignore:true})
		,width:{readOnly:function(widget){ return false;}}
		,height:{readOnly:function(widget){ return false;}}
	})
	,initDefaultMetadata:function(){
//		this.metadata("parameters.radius",50);
		this.metadata("style.width","120px");
		this.metadata("style.height","10px");
		//this.metadata("style.border-radius","50% 50% 50% 50%/50% 50% 50% 50%");
//		this.metadata("style.border","thin solid #808080");
		this.metadata("style.border-top","thin solid #696969");
	}
	,init:function(){

	}
	
	,getResizableTargetContainer:function(){				
		return this.domNode;		 
	}
//	,onResizeStop:function(marginBox){
//		this.inherited(arguments);
//		style.set(this.value.domNode,"width",this.metadata("style.width"));
//		style.set(this.value.domNode,"height",this.metadata("style.height"));		
//	}
//	,getInnerWidgetTemplate:function(params){
//		return this.metadata("parameters.value");
//	}
[/@]
